<template>
	<view>
		<view class="loading" @click="closeMe" v-show="hideLoading">
			<u-loading-icon v-if="loadType == 0 " :text="loadingText[loadType]" size="16" textSize="16" textColor="#ccc"></u-loading-icon>
			<view v-else>{{loadingText[loadType]}}</view>
		</view>
		<view style="height: 80rpx;"></view>
	</view>

</template>

<script>
	export default {
		name:"sk-loading",
		props: {
			// 加载类型 用于获取loadingText列表中的提示文字
			loadType:{
				type:Number,
				default:0,
			},

			loadingText:{
				type:Array,
				default:["数据加载中","数据加载完毕","-没有更多了-","加载失败","暂无数据"]
			}
		},
		watch:{
			'loadType': {
				handler(newVal) {
					if(newVal == 1 || newVal == 3){
						// 如果监听loadType == 1(数据加载完毕)，然后在2000之后执行隐藏
						if(this.timer)clearTimeout(this.timer);
						this.timer = setTimeout(()=>{
							this.hideLoading = false;
						},2000);
					}else if(newVal == 4){
						this.hideLoading = false;
					}else {
						if(this.timer)clearTimeout(this.timer);
						// 如果监听loadType==0 || ==2，需要显示出来
						this.hideLoading = true;
					}
				},
				immediate: true,
			},
		},

		data() {
			return {
				hideLoading:true,
				timer:null,
			};
		},
		methods:{
			closeMe(){
				this.hideLoading = false;
			}
		},
	}
</script>

<style lang="less">
.loading{
	box-sizing: border-box;
	float: left;
	width: 100vw;
	height: 80rpx;
	text-align: center;
	font-size: 30rpx;
	color: #ccc;
	width: 100%;
	padding: 20rpx 0 0 0;

	background-color: transparent;
}
</style>
